import { Button, Col, Form, Input, message, Modal, Popconfirm, Row } from 'antd';
import React, { createRef } from 'react';

const FormItem = Form.Item;
let options = [];
const form = createRef();
function IPDABindingForm(props) {
  const {
    visible,
    titleType,
    onCancel,
    handleSimCreate,
    handleVinCreate,
    handleSubmit,
    confirmType,
    originSim,
    originVin,
    setSim,
    setVin,
    setConfirmType,
    sButtonLoading,
    vButtonLoading,
  } = props;
  // const { getFieldDecorator } = form;
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 14 },
    },
  };
  return (
    <Modal
      visible={visible}
      title={titleType}
      onCancel={onCancel}
      handleSimCreate={handleSimCreate}
      handleVinCreate={handleVinCreate}
      options={options}
      confirmType={confirmType}
      originSim={originSim}
      originVin={originVin}
      footer={[
        <Button key="back" type="primary" size="default" onClick={onCancel}>
          返回
        </Button>,
      ]}
    >
      <Form ref={form} onSubmit={handleSubmit}>
        <Row gutter={8}>
          <Col span={20}>
            <FormItem
              {...formItemLayout}
              label="车机编号"
              name="deviceId"
              rules={[
                {
                  required: true,
                  message: '',
                },
              ]}
            >
              <Input placeholder="" disabled />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={8}>
          <Col span={20}>
            <FormItem
              {...formItemLayout}
              label="VIN号"
              name="vin"
              rules={[
                {
                  required: false,
                  message: '请输入VIN号',
                },
              ]}
            >
              <Input
                placeholder="为空则解除原有绑定"
                onChange={e => {
                  const v = e.target.value;
                  setVin(v);
                  if (!originVin) {
                    if (v.trim()) {
                      confirmType[0] = '确定要绑定该VIN号吗?';
                    } else {
                      confirmType[0] = '';
                    }
                  } else if (v && originVin !== v) {
                    confirmType[0] = '确定要绑定该VIN号吗?';
                  } else if (v && originVin === v) {
                    confirmType[0] = '';
                  } else {
                    confirmType[0] = '确定解除与该VIN号的绑定吗?';
                  }
                  setConfirmType(confirmType);
                }}
              />
            </FormItem>
          </Col>
          <Col span={4}>
            <Popconfirm title={confirmType[0]} onConfirm={handleVinCreate}>
              <Button
                loading={vButtonLoading}
                type="primary"
                size="default"
                disabled={confirmType[0] === ''}
              >
                修改
              </Button>
            </Popconfirm>
          </Col>
        </Row>

        <Row gutter={8}>
          <Col span={20}>
            <FormItem
              {...formItemLayout}
              label="SIM卡号"
              name="sim"
              rules={[
                {
                  required: false,
                  message: '请输入SIM号',
                },
              ]}
            >
              <Input
                placeholder="为空则解除原有绑定"
                onChange={e => {
                  const v = e.target.value;
                  setSim(v);
                  if (!originSim) {
                    if (v.trim()) {
                      confirmType[1] = '确定要绑定该SIM卡号吗?';
                    } else {
                      confirmType[1] = '';
                    }
                  } else if (v && originSim !== v) {
                    confirmType[1] = '确定要绑定该SIM卡号吗?';
                  } else if (v && originSim === v) {
                    confirmType[1] = '';
                  } else {
                    confirmType[1] = '确定解除与该SIM卡的绑定吗?';
                  }
                  setConfirmType(confirmType);
                }}
              />
            </FormItem>
          </Col>
          <Col span={4}>
            <Popconfirm title={confirmType[1]} onConfirm={handleSimCreate}>
              <Button
                loading={sButtonLoading}
                type="primary"
                size="default"
                disabled={confirmType[1] === ''}
              >
                修改
              </Button>
            </Popconfirm>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}

class IPDABindingModel extends React.Component {
  // saveFormRef = React.createRef<FormInstance>();

  state = {
    visible: false,
    titleType: '',
    origin_vin: '',
    modify_vin: '',
    origin_sim: '',
    modify_sim: '',
    deviceId: '',
    confirmType: ['', ''],
    page: '',
    formValues: '',
    vButtonLoading: false,
    sButtonLoading: false,
  };
  componentWillMount() {}
  componentDidMount() {}
  handleCancel = () => {
    const { page, formValues } = this.state;
    const { dispatch } = this.props;
    form.current?.resetFields();

    dispatch({
      type: 'ipda2/getFetchPage',
      payload: {
        url: '/ipda/list',

        page: page.current - 1,
        size: page.pageSize,
        ...formValues,
      },
    });
    options = [];
    this.setState({
      visible: false,
      vButtonLoading: false,
      sButtonLoading: false,
    });
  };
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  showModalEdit = async e => {
    await this.setState({
      visible: true,
      titleType: '修改绑定关系',
      origin_vin: e.vin,
      modify_vin: e.vin,
      origin_sim: e.sim,
      modify_sim: e.sim,
      deviceId: e.deviceId,
      confirmType: ['', ''],
      page: e.page,
      formValues: e.formValues,
    });
    form.current?.setFieldsValue({
      deviceId: e.deviceId,
      sim: e.sim,
      vin: e.vin,
    });
  };
  handleSimCreate = () => {
    // const vinState = confirmType[0]
    this.setState({
      sButtonLoading: true,
    });
    const { dispatch } = this.props;
    dispatch({
      type: 'ipda2/postObjWithRes',
      payload: {
        url: '/ipda/bindingsim',

        deviceId: this.state.deviceId,
        originSim: this.state.origin_sim,
        sim: this.state.modify_sim,
      },

      callback: data => {
        if (data.statusCode === '0') {
          message.success('操作成功');
          this.setState({
            origin_sim: this.state.modify_sim,
            confirmType: [this.state.confirmType[0], ''],
          });
        } else {
          // message.error(data.statusMessage, 3);
        }
        this.setState({
          sButtonLoading: false,
        });
      },
    });
  };
  handleVinCreate = () => {
    // const simState = confirmType[1]
    this.setState({
      vButtonLoading: true,
    });
    const { dispatch } = this.props;
    dispatch({
      type: 'ipda2/postObjWithRes',
      payload: {
        url: '/ipda/bindingvin',

        deviceId: this.state.deviceId,
        originVin: this.state.origin_vin,
        vin: this.state.modify_vin,
      },
      callback: data => {
        if (data.statusCode === '0') {
          message.success('操作成功');
          this.setState({
            origin_vin: this.state.modify_vin,
            confirmType: ['', this.state.confirmType[1]],
          });
        } else {
          // message.error(data.statusMessage, 3);
        }
        this.setState({
          vButtonLoading: false,
        });
      },
    });
  };

  render() {
    // const confirmType = ['确定要绑定该VIN号吗?', '确定要解绑该VIN号吗?', '确定要绑定该SIM卡号吗?', '确定要解绑该SIM卡号吗?'];
    return (
      <div>
        <IPDABindingForm
          // ref={this.saveFormRef}
          visible={this.state.visible}
          titleType={this.state.titleType}
          onCancel={this.handleCancel}
          handleVinCreate={this.handleVinCreate}
          handleSimCreate={this.handleSimCreate}
          handleSubmit={this.handleSubmit}
          confirmType={this.state.confirmType}
          originVin={this.state.origin_vin}
          originSim={this.state.origin_sim}
          setSim={sim => this.setState({ modify_sim: sim })}
          setVin={vin => this.setState({ modify_vin: vin })}
          setConfirmType={newType => this.setState({ confirmType: newType })}
          sButtonLoading={this.state.sButtonLoading}
          vButtonLoading={this.state.vButtonLoading}
        />
      </div>
    );
  }
}
export default IPDABindingModel;
